import { makeStyles } from "@material-ui/core/styles"
import * as React from "react"
import Layout from "../layout"
import SEO from "../seo"
import homepageBanner from "../../images/homepage-banner.jpg"
import Hero from "./hero"

const useStyles = makeStyles(theme => ({
  root: {
    display: "inline-block",
    width: "100%",
    padding: "8rem 0",
    textAlign: "center",
    color: "#fff",
    background: `url(${homepageBanner}) no-repeat center top`,
    backgroundSize: "cover",
    backgroundPosition: "center top",
    backgroundAttachment: "fixed",
  },
  h3: {
    lineHeight: "2em",
    [theme.breakpoints.down("sm")]: {
      fontSize: "40px",
    },
    [theme.breakpoints.up("lg")]: {
      fontSize: "50px",
    },
  },
  h6: {
    [theme.breakpoints.up("lg")]: {
      display: "inline-block",
      width: "1000px",
    },
  },
}))

export default function Home() {
  const classes = useStyles()
  return (<Layout>
    <SEO title="Home"/>
    <Hero/>
  </Layout>)
}

